<template>
  <div class="flowTable-container">
    <FlowHeader :submit="submitDat" @routHandle="routHandle" />
    <div class="flowTable-content">
      <div :class="{procedureTemplate: true, topShow:topShow}">
        <div :class="{title:true, titShow:!topShow}">
          <span @click="openTem()"><i />流程模板</span>
          <span v-if="topShow" @click="moveTem()"> X </span>
          <span v-if="!topShow" @click="openTem()"> > </span>
        </div>
        <div class="items" @click="changeData('sm')">
          <img src="@/assets/temIcon1.png" alt="">
          <div>
            <div>简单流程</div>
            <div>所有人的审批都一样</div>
          </div>
        </div>
        <div class="items" @click="changeData('to')">
          <img src="@/assets/temIcon2.png" alt="">
          <div>
            <div>分条件流程</div>
            <div>所有人的审批都一样</div>
          </div>
        </div>
        <div class="items" @click="changeData('more')">
          <img src="@/assets/temIcon3.png" alt="">
          <div>
            <div>多条件流程</div>
            <div>所有人的审批都一样</div>
          </div>
        </div>
      </div>
      <div class="zoom">
        <div class="zoom-out" @click="zoomHandle('out')" />
        <span>{{ zoom }}%</span>
        <div class="zoom-in" @click="zoomHandle('in')" />
      </div>
      <div id="dashboard_skill_svg" class="svgBox" :style="{transform:`scale(${zoom/100})`}" @click="moveTem()" />
      <div v-show="setShow" class="mask" @click="setShow = false" />
      <div :class="{setParamsBox: true, setShow:setShow}">
        <div v-if="setType == 'start'" class="content">
          <div class="title">发起人</div>
          <div class="label"><span>设置发起人</span></div>
          <div class="cont">
            <Cascader :dialog-visible="dialogVisible" sel-style="width:520px;overflow:scroll" set-style="width:100%;background: #fff;" :check-list-dataes="checkList" @getValue="getValue" />
          </div>
        </div>
        <!-- 审批人 -->
        <div v-else-if="setType == 'approval'" class="content">
          <div class="title">
            <span v-if="!cgTit">{{ setTit }}<img src="@/assets/edit.svg" style="position: relative;top:1px" width="15px" alt="" @click="changeTit"></span>
            <el-input v-if="cgTit" v-model="setTit" class="boxTit" :autofocus="setTit" size="mini" @blur="changeTit" />
          </div>
          <div class="label"><span>设置发起人</span></div>
          <div class="cont">
            <div>
              <el-radio-group v-model="tableItem.userType" style="line-height: 40px;">
                <el-radio :label="1">指定成员</el-radio>
                <el-radio :label="2">主管</el-radio>
                <el-radio :label="3">发起人自选</el-radio>
                <el-radio :label="4">发起人自己</el-radio>
                <el-radio :label="5">表单里的联系人</el-radio>
              </el-radio-group>
            </div>
            <div v-if="tableItem.userType == 1">
              <Cascader :dialog-visible="dialogVisible" sel-style="width:520px;overflow:scroll" set-style="width:100%;background: #fff;" :check-list-dataes="checkList" @getValue="getValue" />
            </div>
            <div v-if="tableItem.userType == 2">
              <div>发起人的
                <el-select v-model="tableItem.mangerLevel" placeholder="请选择" size="mini">
                  <el-option label="直接主管" :value="1" />
                  <el-option label="二级主管" :value="2" />
                  <el-option label="三级主管" :value="3" />
                </el-select>
              </div>
              <div style="margin: 15px 0;"><el-checkbox v-model="tableItem.toUpperManagerLevel">找不到主管时,由上级主管代审批</el-checkbox></div>
              <div class="tit">多人审批时采用的审批方式</div>
              <div>
                <el-radio-group v-model="tableItem.multiApproveMode" style="line-height: 40px;">
                  <el-radio :label="1">会签</el-radio>
                  <el-radio :label="2">活签</el-radio>
                </el-radio-group>
              </div>
              <div class="tit">审批人为空时</div>
              <div>
                <el-radio-group v-model="tableItem.approveUserNull" style="line-height: 40px;">
                  <el-radio :label="1">自动通过</el-radio>
                  <el-radio :label="2">自动转交管理员</el-radio>
                </el-radio-group>
              </div>
            </div>
            <div v-if="tableItem.userType == 3">
              <div class="tit">多人审批时采用的审批方式</div>
              <div>
                <el-radio-group v-model="tableItem.multiApproveMode" style="line-height: 40px;">
                  <el-radio :label="1">会签</el-radio>
                  <el-radio :label="2">活签</el-radio>
                </el-radio-group>
              </div>
            </div>
            <div v-if="tableItem.userType == 4">
              <div style="color:#666;font-size: 14px;">发起人自己将作为审批人处理审批单</div>
            </div>
            <div v-if="tableItem.userType == 5">
              <div>
                <Cascader :dialog-visible="dialogVisible" sel-style="width:520px;overflow:scroll" set-style="width:100%;background: #fff;" :check-list-dataes="checkList" @getValue="getValue" />
              </div>
              <div class="tit">多人审批时采用的审批方式</div>
              <div>
                <el-radio-group v-model="tableItem.multiApproveMode" style="line-height: 40px;">
                  <el-radio :label="1">会签</el-radio>
                  <el-radio :label="2">活签</el-radio>
                </el-radio-group>
              </div>
              <div class="tit">审批人为空时</div>
              <div>
                <el-radio-group v-model="tableItem.approveUserNull" style="line-height: 40px;">
                  <el-radio :label="1">自动通过</el-radio>
                  <el-radio :label="2">自动转交管理员</el-radio>
                </el-radio-group>
              </div>
            </div>
          </div>
        </div>
        <!-- 抄送人-->
        <div v-else-if="setType == 'CCList'" class="content">
          <div class="title">
            <span v-if="!cgTit">{{ setTit }} <span @click="changeTit">修改</span></span>
            <el-input v-if="cgTit" v-model="setTit" class="boxTit" :autofocus="setTit" size="mini" @blur="changeTit" />
          </div>
          <div class="cont">
            <div>
              <Cascader :dialog-visible="dialogVisible" sel-style="width:520px;overflow:scroll" set-style="width:100%;background: #fff;" :check-list-dataes="checkList" @getValue="getValue" />
            </div>
            <div>
              <div style="margin: 15px 0;"><el-checkbox v-model="tableItem.toUpperManagerLevel">允许发起人自选抄送人</el-checkbox></div>
            </div>
          </div>
        </div>
        <div v-else class="content">
          <div class="title" style="display: flex; justify-content: space-between">
            <div>
              <span v-if="!cgTit">{{ setTit }} <img src="@/assets/edit.svg" style="position: relative;top:1px" width="15px" alt="" @click="changeTit"></span>
              <el-input v-if="cgTit" v-model="setTit" class="boxTit" :autofocus="setTit" size="mini" @blur="changeTit" />
            </div>
            <div>
              <el-select v-model="priorityVal" placeholder="请选择" size="mini" @change="priorityHandle">
                <el-option v-for="item in priorityList" :key="item" :label="`优先级${item}`" :value="item" />
              </el-select>
            </div>
          </div>
          <div class="cont">
            <div style="line-height: 40px;font-size: 14px; color: #999;">当审批单同时满足一下条件时进入此流程</div>
            <div v-for="(item, index) in conditionData" :key="index">
              <div v-if="item.type == 'statUser'" class="list">
                <div style="padding: 0 10px;line-height: 33px;">发起人</div>
                <div style="flex:1;">
                  <Cascader :dialog-visible="dialogVisible" sel-style="width:452px;overflow:scroll" set-style="width:100%;background: #fff;" :check-list-dataes="item.data.checkList" @getValue="en => tabDatValue(en, index)" />
                </div>
              </div>
              <div v-if="item.type == 'number' || item.type == 'money'" class="list">
                <div style="padding: 0 10px;line-height: 33px;">{{ item.data.title }}</div>
                <div style="width: 100px">
                  <el-select v-model="item.data.condit" placeholder="请选择" size="mini">
                    <el-option label="小于" value="<" />
                    <el-option label="大于" value=">" />
                    <el-option label="小于等于" value="<=" />
                    <el-option label="等于" value="==" />
                    <el-option label="大于等于" value=">=" />
                  </el-select>
                </div>
                <div style="flex:1;padding: 0 10px;">
                  <el-input v-model="item.data.value" type="text" size="mini" placeholder="请输入" />
                </div>
              </div>
              <div v-if="item.type == 'radio'" class="list">
                <div style="padding: 0 10px;line-height: 33px;">单选框</div>
                <div style="flex:1;padding: 0 10px;">
                  <el-checkbox-group v-model="item.data.radio">
                    <el-checkbox v-for="(it, ind) in item.data.titlab" :key="ind" :label="it">{{ it }}</el-checkbox>
                  </el-checkbox-group>
                </div>
              </div>
              <div v-if="item.type == 'department'" class="list">
                <div style="padding: 0 10px;line-height: 33px;">部门</div>
                <div style="flex:1">
                  <Cascader :dialog-visible="dialogVisible" :include-member="1" sel-style="width:452px;overflow:scroll" set-style="width:100%;background: #fff;" :check-list-dataes="item.data.checkList" @getValue="en => tabDatValue(en, index)" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <el-row class="foot">
          <el-button size="small" @click="cancelData">取消</el-button>
          <el-button type="primary" size="small" @click="saveData">保存</el-button>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import * as d3 from 'd3'
import FlowHeader from '@/components/FlowHeader'
import Cascader from '@/components/Cascader'

export default {
  name: 'Dashboard',
  components: {
    FlowHeader,
    Cascader
  },
  data() {
    return {
      topShow: true,
      setShow: false,
      cgTit: false,
      num: 1,
      dialogVisible: false,
      dataStorage: '',
      priorityVal: '',
      setPriority: 1,
      priorityList: [],
      conditDataStorage: {},
      checkList: [],
      boxType: 'box',
      setType: '',
      conditionStorage: '',
      conditionData: [],
      tableItem: {
        userType: 1,
        mangerLevel: 1,
        toUpperManagerLevel: 1,
        multiApproveMode: 1,
        approveUserNull: 1,
        inDepatment: '',
        condition: '',
        conditionExpression: ''
      },
      svg: '',
      zInd: 9,
      zoom: 100,
      canWit: '',
      canHit: 800,
      setTit: '',
      deployData: {},
      data: [
        { type: 'start', id: 'a222', name: '发起人', items: { name: '所有人' }},
        { type: 'approval', id: 'a333', name: '审批人', items: { name: '请选择审批人' }},
        { type: 'CCList', id: 'a444', name: '抄送人', items: { name: '发起人自选' }}
      ],
      initApproval: { type: 'approval', id: 'a44431', name: '审批人', items: { id: '', name: '请选择审批人' }},
      initCCList: { type: 'CCList', id: 'a44432', name: '抄送人', items: { id: '', name: '发起人自选' }},
      initCondition: { type: 'condition', id: 'a44433', name: '抄送人', items: { id: '', name: '发起人自选' }},
      init: [
        { type: 'start', id: 'a4441', name: '发起人', items: { id: '', name: '所有人' }},
        { type: 'approval', id: 'a4442', name: '审批人', items: { id: '', name: '请选择审批人' }},
        { type: 'CCList', id: 'a4443', name: '抄送人', items: { id: '', name: '发起人自选' }}
      ],
      datas: [
        { type: 'start', id: 'a444311', name: '发起人', items: { id: '', name: '所有人' }},
        { type: 'condition', fid: 'a444311', node: [
          [{ type: 'cond', id: 'a444321', name: 1, priority: 1, items: { id: '', cont: '请设置条件' }},
            { type: 'approval', id: 'a444314', name: '审批人', items: { id: '', name: '请选择审批人' }},
            { type: 'CCList', id: 'a4443141', name: '抄送人', items: { id: '', name: '发起人自选' }}
          ],
          [{ type: 'cond', id: 'a4443142', name: 2, priority: 2, items: { id: '', cont: '请设置条件' }},
            { type: 'approval', id: 'a4443142', name: '审批人', items: { id: '', name: '请选择审批人' }},
            { type: 'CCList', id: 'a4443214', name: '抄送人', items: { id: '', name: '发起人自选' }}
          ]
        ] }
      ],
      moreData: [
        { type: 'start', id: 'a444354521', name: '发起人', items: { id: '', name: '所有人' }},
        { type: 'condition', node: [
          [{ type: 'cond', id: 'a444354523', name: 1, priority: 1, items: { id: '', cont: '发起人自选' }},
            { type: 'condition', node: [
              [{ type: 'cond', id: 'a4447635456', name: 1, priority: 1, items: { id: '', cont: '发起人自选' }, setInfo: [] },
                { type: 'CCList', id: 'a4443785459', name: '抄送人', items: { id: '', name: '发起人自选' }, setInfo: [] },
                { type: 'approval', id: 'a44035458', name: '审批人', items: { id: '', name: '请选择审批人' }, setInfo: [] }
              ],
              [{ type: 'cond', id: 'a444359455', name: 2, priority: 2, items: { id: '', cont: '发起人自选' }, setInfo: [] },
                { type: 'CCList', id: 'a444835459', name: '抄送人', items: { id: '', name: '发起人自选' }, setInfo: [] },
                { type: 'approval', id: 'a447435458', name: '审批人', items: { id: '', name: '请选择审批人' }, setInfo: [] }
              ]
            ] }
          ],
          [{ type: 'cond', id: 'a444365457', name: 2, priority: 2, items: { id: '', cont: '发起人自选' }, setInfo: [] },
            { type: 'condition', node: [
              [{ type: 'cond', id: 'a444355456', name: 1, priority: 1, items: { id: '', cont: '发起人自选' }, setInfo: [] },
                { type: 'CCList', id: 'a4443455459', name: '抄送人', items: { id: '', name: '发起人自选' }, setInfo: [] },
                { type: 'approval', id: 'a444435458', name: '审批人', items: { id: '', name: '请选择审批人' }, setInfo: [] }
              ],
              [{ type: 'cond', id: 'a444354355', name: 2, priority: 2, items: { id: '', cont: '发起人自选' }, setInfo: [] },
                { type: 'CCList', id: 'a444352459', name: '抄送人', items: { id: '', name: '发起人自选' }, setInfo: [] },
                { type: 'approval', id: 'a444135458', name: '审批人', items: { id: '', name: '请选择审批人' }, setInfo: [] }
              ]
            ] }
          ]
        ] },
        { type: 'CCList', id: 'a44435451', name: '抄送人', items: { id: '', name: '发起人自选' }, setInfo: [] }
      ]
    }
  },
  computed: {
    ...mapGetters([
      'flowId',
      'tableData',
      'baseData',
      'flowData'
    ])
  },
  watch: {

  },
  mounted() {
    this.initData()
  },
  methods: {
    async initData() {
      if (this.flowId) {
        await this.$store.dispatch('approval/getFlowInfoAct', { id: this.flowId }).then((res) => {
          this.$store.dispatch('approval/setflowdata', { ...res })
          this.$store.dispatch('approval/setflowid', '')
          const data = JSON.parse(res.flowData)
          data.splice(-1, 1)
          this.data = data
          this.setD3Canvas()
          this.loading = false
        }).catch(() => {
          this.$message.error('数据请求失败！请稍后重试')
          this.loading = false
        })
      } else {
        if (this.flowData) {
          const data = JSON.parse(this.flowData)
          data.splice(-1, 1)
          this.data = data
        }
        this.setD3Canvas()
      }
    },
    routHandle(url) {
      this.$store.dispatch('approval/setflowdata', { flowData: JSON.stringify([...this.data, { type: 'end', name: '结束' }]) })
      this.$router.push(url)
    },
    // 设置画布
    setD3Canvas() {
      this.canWit = this.$el.parentNode.offsetWidth
      this.canHit = this.$el.parentNode.offsetHeight - 130
      const svg = d3.select('#dashboard_skill_svg') // 选择文档中的body元素
      const node = svg.selectAll('div')
      this.svg = svg
      this.node = node
      this.initStart(node, this.data)
      const endNode = svg.append('div')
        .attr('class', 'end-node')
      endNode.append('div')
        .attr('class', 'end-node-circle')
      endNode.append('div')
        .attr('class', 'end-node-text')
        .text('流程结束')
    },
    // 初始化信息
    initStart(node, data) {
      const _this = this
      node.data(data)
        .enter()
        .each(function(d) {
          if (d.type !== 'condition') {
            _this.creatBox(d3.select(this))
          } else {
            _this.creatBranch(d3.select(this), d.node)
          }
        })
    },
    // 生成分支
    creatBranch(node, data) {
      const _this = this
      const branch = node.append('div')
        .attr('class', 'branch-wrap')
      const branchbox = branch.append('div')
        .attr('class', 'branch-box-wrap')
      const box = branchbox.append('div')
        .attr('class', 'branch-box')
      box.append('button')
        .attr('class', 'add-branch')
        .text('添加分支')
        .on('click', function(d) {
          const dt = [{ type: 'cond', name: d.node.length + 1, priority: d.node.length + 1, items: { id: '', cont: '请设置条件' }}]
          d.node.push(dt)
          _this.svg.selectAll('div').remove()
          _this.setD3Canvas()
        })
      const col = box.selectAll('div')
        .data(data)
        .enter()
      const colbox = col.append('div')
        .attr('id', (d, i) => `col${_this.getId()}`)
        .attr('class', 'col-box')
      const firstNode = col.select('div').filter(function(d, i) {
        return i === 0
      })
      const lastNode = col.selectAll('div').filter(function(d, i) {
        return i === (data.length - 1)
      })
      firstNode.append('span')
        .attr('class', 'top-left-cover-line')
      firstNode.append('span')
        .attr('class', 'bottom-left-cover-line')
      lastNode.append('span')
        .attr('class', 'top-right-cover-line')
      lastNode.append('span')
        .attr('class', 'bottom-right-cover-line')
      col.each(function(dts, i) {
        colbox.each(function(d, j) {
          if (i === j) {
            d3.select(this).selectAll('div')
              .data(dts)
              .enter()
              .each(function(dt) {
                if (dt.type !== 'condition') {
                  if (dt.type === 'cond') {
                    _this.createConditionBox(d3.select(this))
                  } else {
                    _this.creatBox(d3.select(this))
                  }
                } else {
                  _this.creatBranch(d3.select(this), dt.node)
                }
              })
          }
        })
      })
      this.createMark(branchbox)
    },

    // 生成审核框
    creatBox(node) {
      const _this = this
      const nodewrap = node.append('div')
        .attr('class', 'node-wrap')
      const cont = nodewrap.append('div')
        .attr('class', d => d.type === 'start' ? 'node-wrap-box start-node' : 'node-wrap-box')
      const tit = cont.append('div')
        .attr('class', 'title')
        .style('background', function(d) {
          if (d.type === 'start') {
            return '#576A96'
          } else if (d.type === 'approval') {
            return 'rgb(255, 148, 62)'
          } else if (d.type === 'CCList') {
            return 'rgb(50, 150, 250)'
          }
        })
      tit.append('span')
        .attr('class', function(d) {
          if (d.type === 'CCList') {
            return 'icon iconshenpiren'
          } else if (d.type === 'approval') {
            return 'icon iconchaosong'
          } else {
            return 'icon'
          }
        })
      tit.append('span')
        .attr('class', 'edit-tit')
        .text(d => d.name)
      tit.append('i')
        .attr('class', 'close')
        .text('x')
        .on('click', function(d) {
          _this.delData(_this.data, d)
          d3.select(this.parentNode.parentNode.parentNode).remove()
        })
      tit.on('click', function(d) {
        if (d.type === 'starts') {
          d3.select(this).select('.edit-tit').join(
            enter => {},
            update => {
              if (!update.select('input')._groups[0][0]) {
                update.text('')
                const put = update.append('input')
                  .attr('value', d.name)
                  .attr('class', 'chName')
                  .attr('autofocus', 'autofocus')
                  .on('blur', function() {
                    d.name = this.value
                    update.text(d.name)
                    put.remove()
                  })
              }
            }
          )
        }
      })
      cont.append('div')
        .attr('class', 'content')
        .text(d => d.items.name)
        .on('click', function(d) {
          console.log(1, d)
          _this.dataStorage = JSON.parse(JSON.stringify(_this.data))
          _this.setShow = true
          _this.boxType = 'box'
          _this.setType = d.type
          _this.setTit = d.name
          _this.tableDataChange(d)
        })
      this.createMark(nodewrap)
    },
    // 右边弹框数据处理
    tableDataChange(obj) {
      this.tableItem = obj
      this.checkList = obj.userRange || []
    },
    // 生成条件框
    createConditionBox(node, data) {
      const _this = this
      const condNode = node.append('div')
        .attr('class', 'condition-node')
      const atuo = condNode.append('div')
        .attr('class', 'condition-node-box')
      const auto = atuo.append('div')
        .attr('class', 'auto-judge')
        .on('click', function(d) {
          console.log(2, d)
          _this.conditDataStorageHandle(_this.data, d)
          _this.dataStorage = JSON.parse(JSON.stringify(_this.data))
          _this.setShow = true
          _this.boxType = 'condit'
          _this.setType = d.type
          _this.setPriority = d.priority
          _this.priorityVal = d.priority
          _this.setTit = typeof (d.name) === 'number' ? '条件' + d.name : d.name
          _this.conditionHandle(d)
        })
      const tit = auto.append('div')
        .attr('class', 'title-wrapper')
      tit.append('span')
        .attr('class', 'edit-tit')
        .text(d => typeof (d.name) === 'number' ? '条件' + d.name : d.name)
      tit.append('span')
        .attr('class', 'prio-tit')
        .text(d => `优先级${d.priority}`)
      tit.append('i')
        .attr('class', 'close')
        .text('x')
        .on('click', function(d) {
          _this.delBranchData(_this.data, d)
          _this.svg.selectAll('div').remove()
          _this.setD3Canvas()
          return false
        })
      auto.append('div')
        .attr('class', 'content')
        .text(d => d.items.cont ? d.items.cont : '请设置条件')
      atuo.append('div')
        .attr('class', 'add-node-btn')
        .append('div')
        .attr('class', 'btn')
        .on('click', function(d) {
          _this.zInd += 1
          _this.reAddBox(_this.svg)
          _this.createAddBox(_this.svg, this.parentNode, d)
        })
    },
    // 生成三角号
    createMark(node) {
      const _this = this
      node.append('div')
        .attr('class', 'add-node-btn-box')
        .append('div')
        .attr('class', 'add-node-btn')
        .append('div')
        .attr('class', 'btn')
        .on('click', function(d) {
          _this.zInd += 1
          _this.reAddBox(_this.svg)
          _this.createAddBox(_this.svg, this.parentNode.parentNode, d)
        })
    },

    // 创建新增模块
    createAddBox(svg, tsNode, dat) {
      const _this = this
      const itemData = [{ name: '审批人', type: 'initApproval' }, { name: '抄送人', type: 'initCCList' }, { name: '条件分支', type: 'initCondition' }]
      const node = d3.select(tsNode)
      node.style('z-index', _this.zInd)
      const cNode = node.append('div')
        .attr('class', 'addbox')
      cNode.append('span')
        .attr('class', 'cls')
        .on('click', function() {
          _this.reAddBox(svg)
        })
      const ccNode = cNode.append('div')
        .attr('class', 'contBox')
        .selectAll(`div`)
        .data(itemData)
        .enter()
      const cn = ccNode.append('div')
        .attr('class', 'items')
      cn.append('div')
        .attr('class', function(d) {
          if (d.type === 'initApproval') {
            return 'icon iconshenpiren'
          } else if (d.type === 'initCCList') {
            return 'icon iconchaosong'
          } else {
            return 'icon iconfenzhi'
          }
        })
        .on('click', function(d) {
          if (d.type === 'initCondition') {
            _this.moreBranchData(_this.data, dat)
            svg.selectAll('div').remove()
            _this.setD3Canvas()
          } else {
            _this.delData(_this.data, dat, d)
            svg.selectAll('div').remove()
            _this.setD3Canvas()
          }
        })
      cn.append('div')
        .attr('class', 'text')
        .text(function(d) {
          return d.name
        })
    },
    // 数据删除、添加
    delData(data, chData, isAdd) {
      const _this = this
      const num = data.indexOf(chData)
      if (num !== -1) {
        isAdd ? data.splice(num + 1, 0, _this[isAdd.type]) : data.splice(num, 1)
        return true
      } else {
        data.forEach(n => {
          if (n.type === 'condition') {
            for (var i = 0; i < n.node.length; i++) {
              const st = _this.delData(n.node[i], chData, isAdd)
              if (st) {
                break
              }
            }
          }
        })
      }
    },
    // 多分支数据处理添加
    moreBranchData(data, dt) {
      const _this = this
      const num = data.indexOf(dt)
      if (num !== -1) {
        const yData = data.slice(num + 1, data.length)
        const intData = { type: 'condition', node: [
          [{ type: 'cond', id: `${_this.getId()}`, name: 1, priority: 1, items: { id: '', cont: '请设置条件' }, condition: [] }, ...yData],
          [{ type: 'cond', id: `${_this.getId()}`, name: 2, priority: 2, items: { id: '', cont: '请设置条件' }, condition: [] }]
        ] }
        data.splice(num + 1, data.length, intData)
      } else {
        data.forEach(n => {
          if (n.type === 'condition') {
            for (var i = 0; i < n.node.length; i++) {
              const st = _this.moreBranchData(n.node[i], dt)
              if (st) {
                break
              }
            }
          }
        })
      }
    },
    // 删除分支数据
    delBranchData(data, dt, fData, h, i, source) {
      const _this = this
      const num = data.indexOf(dt)
      if (num !== -1) {
        if (fData.node.length > 2) {
          fData.node.splice(i, 1)
          fData.node.forEach((n, j) => {
            n[0].priority = j + 1
          })
        } else {
          const cont = fData.node[1 - i].slice(1, fData.node[1 - i].length)
          source.splice(h, 1, ...cont)
        }
        return true
      } else {
        data.forEach((n, h) => {
          if (n.type === 'condition') {
            for (var i = 0; i < n.node.length; i++) {
              const st = _this.delBranchData(n.node[i], dt, n, h, i, data)
              if (st) {
                break
              }
            }
          }
        })
      }
    },
    // 生成无重复ID
    getId() {
      return Math.random().toString(16).substr(3)
    },
    // 移除新增模块
    reAddBox(svg) {
      const dt = svg.select('.addbox')
      dt.remove()
    },
    // 缩放整体视图
    zoomHandle(st) {
      if (st === 'in') {
        this.zoom = this.zoom >= 200 ? 200 : this.zoom + 10
      } else {
        this.zoom = this.zoom <= 50 ? 50 : this.zoom - 10
      }
    },
    // 流程模板切换
    changeData(st) {
      if (st === 'sm') {
        this.data = this.init.concat()
      } else if (st === 'to') {
        this.data = this.datas.concat()
      } else if (st === 'more') {
        this.data = this.moreData.concat()
      }
      this.svg.selectAll('div').remove()
      this.setD3Canvas()
    },
    // 条件处理
    conditionHandle(d) {
      d.condition = this.conditDataContrast(d.condition)
      this.dataHandle(this.data, d)
      this.conditionStorage = d
      this.conditionData = d.condition
    },
    // data数据遍历
    dataHandle(obj, d) {
      obj.forEach((n, i) => {
        if (n.id === d.id) {
          return obj
        } else {
          this.dataHandle(n, d)
        }
      })
    },
    //  右边弹框数据保存
    saveData() {
      if (this.boxType === 'condit') {
        this.conditionStorage.name = this.setTit
        this.conditionExpressionHandle()
        console.log(66, this.conditionStorage)
      } else {
        const itemTit = []
        this.tableItem.userRange = this.checkList
        if (this.checkList.length > 0) {
          this.checkList.forEach(n => itemTit.push(n.objectName))
          this.tableItem.items.name = itemTit.join(',')
        }
        this.tableItem.name = this.setTit
        console.log(66, this.tableItem)
      }
      this.svg.selectAll('div').remove()
      this.setD3Canvas()
      this.setShow = false
    },
    // 条件数据处理 - 给后端的格式
    conditionExpressionHandle() {
      const conditionArr = []
      const titleArr = []
      this.conditionData.forEach(n => {
        if (n.type === 'statUser' && n.data.checkList.length > 0) {
          const tit = []
          if (n.data.inUser > 0) {
            conditionArr.push(`\$\{statUser\}inUser[${n.data.inUser}]`)
          }
          if (n.data.inDepartment.length > 0) {
            conditionArr.push(`\$\{statUser\}inDepartment[${n.data.inDepartment}]`)
          }
          n.data.checkList.forEach(n => {
            tit.push(n.name)
          })
          titleArr.push(`发起人：${tit.join('或')}`)
        } else if (n.type === 'number' && n.data.condit) {
          conditionArr.push(`\$\{${n.fieldKey}\}${n.data.condit}${n.data.value || 0}`)
          titleArr.push(n.data.name + n.data.condit + n.data.value)
        } else if (n.type === 'money' && n.data.condit) {
          conditionArr.push(`\$\{${n.fieldKey}\}${n.data.condit}${n.data.value || 0}`)
          titleArr.push(n.data.name + n.data.condit + n.data.value)
        } else if (n.type === 'radio' && n.data.radio.length > 0) {
          const rodio = []
          n.data.radio.forEach(h => {
            rodio.push(`\$\{${n.fieldKey}\} == ${h}`)
          })
          conditionArr.push(rodio.join('||'))
          titleArr.push(n.data.title + `:` + n.data.radio.join(','))
        } else if (n.type === 'department' && n.data.checkList.length > 0) {
          const tit = []
          n.data.checkList.forEach(n => {
            tit.push(n.name)
          })
          titleArr.push(`发起人：${tit.join('或')}`)
          conditionArr.push(`\$\{currUserId\}inDepatment[${n.data.inDepartment}]`)
          titleArr.push(`部门：${tit.join(',')}`)
        }
      })
      this.conditionStorage.items.cont = titleArr.length > 0 ? titleArr.join(',') : ''
      this.conditionStorage.conditionExpression = conditionArr.length > 0 ? conditionArr.join('&&') : ''
    },
    //  右边弹框数据取消
    cancelData() {
      if (this.boxType === 'condit') {
        this.data = JSON.parse(JSON.stringify(this.dataStorage))
        this.setShow = false
      }
      this.setShow = false
      this.checkList = this.tableItem.userRange || []
    },
    // 条件数据对比处理
    conditDataContrast(objData) {
      const data = JSON.parse(JSON.stringify(this.tableData))
      console.log(data)
      let retData = []
      const condition = [{ type: 'statUser', fieldKey: 'statUser', name: '发起人', data: { checkList: [], inUser: [], inDepartment: [] }}]
      data.map((n) => {
        if (n.type === 'radio' && n.data.isMust || n.type === 'money' && n.data.isMust || n.type === 'number' && n.data.isMust || n.type === 'department' && n.data.isMust) {
          condition.push({ ...n })
        }
      })
      if (objData && objData.length === 0) {
        retData = condition
      } else if (objData.length > 0) {
        const newData = condition
        condition.forEach((h, i) => {
          objData.forEach(n => {
            if (h.fieldKey === n.fieldKey) {
              newData.splice(i, 1, { ...n })
            }
          })
        })
        retData = newData
      }
      console.log(retData)
      return retData
    },
    // 打开模板展示
    openTem() {
      this.topShow = true
    },
    // 关闭模板展示
    moveTem() {
      this.topShow = false
    },
    // 条件部门人员选择框
    tabDatValue(val, ind) {
      if (this.conditionData[ind].type === 'statUser') {
        const user = []
        const department = []
        val.forEach(n => {
          if (n.type === '2') {
            user.push(n.id)
          } else {
            department.push(n.id)
          }
        })
        this.conditionData[0].data.checkList = val
        this.conditionData[0].data.inUser = user
        this.conditionData[0].data.inDepartment = department
      } else if (this.conditionData[ind].type === 'department') {
        const department = []
        val.forEach(n => {
          department.push(n.id)
        })
        this.conditionData[ind].data.inDepartment = department
        this.conditionData[ind].data.checkList = val
      }
    },
    // 发起人、审批人、曹松仁部门人员选择框数据处理
    getValue(val) {
      this.checkList = val.map(n => {
        return { objectId: n.id, objectName: n.name, objectType: n.type }
      })
    },
    // 右弹框 标题调整
    changeTit() {
      this.cgTit = !this.cgTit
    },
    // 条件优先级下拉数据
    conditDataStorageHandle(source, d) {
      for (const val of source) {
        if (val.type === 'condition') {
          for (const vale of val.node) {
            if (vale[0].type === 'cond' && vale[0].id === d.id) {
              this.conditDataStorage = val
              this.conditListStorage(this.conditDataStorage)
            } else {
              this.conditDataStorageHandle(vale, d)
            }
          }
        }
      }
    },
    // 优先级下拉处理
    conditListStorage(dat) {
      const list = []
      dat.node.forEach(n => {
        list.push(n[0].priority)
      })
      this.priorityList = list
    },
    // 优先级选择数据处理
    priorityHandle() {
      const n = this.setPriority - 1
      const m = this.priorityVal - 1
      this.conditDataStorage.node[n] = this.conditDataStorage.node.splice(m, 1, this.conditDataStorage.node[n])[0]
      for (let i = 0; i < this.conditDataStorage.node.length; i++) {
        this.conditDataStorage.node[i][0].priority = i + 1
      }
      this.setPriority = m + 1
    },
    // 提交数据验证
    async verificationHandle() {
      if (await this.varifQuery(this.data)) {
        return false
      } else {
        return true
      }
    },
    // 验证数据查询
    varifQuery(data) {
      for (let i = 0; i < data.length; i++) {
        if (data[i].type === 'condition') {
          for (let j = 0; j < data[i].node.length; j++) {
            console.log(data[i].node[j])
            if (data[i].node[j][0].type === 'cond' && data[i].node[j][0].conditionExpression) {
              console.log(55, this.num++)
              this.varifQuery(data[i].node[j])
              break
            } else if (data[i].node[j][0].type === 'cond') {
              console.log(88, this.num++, data[i].node[j])
              this.$message.error(`请设置条件${data[i].node[j][0].name}后保存发布`)
              return true
            }
          }
        }
      }
    },
    // 数据保存
    async submitDat() {
      await this.$store.dispatch('approval/setflowdata', { flowData: JSON.stringify(this.data) })
      await this.$store.dispatch('approval/setflowst', 'memory')

      const pramsFlowData = [...this.data, { name: '结束', type: 'end' }]
      const flowData = JSON.stringify(pramsFlowData)
      const tableData = []
      this.tableData.forEach(n => {
        tableData.push({ ...n, title: n.data.title, data: JSON.stringify(n.data) })
      })
      const pramas = { baseData: this.baseData, tableData, flowData }
      console.log(JSON.stringify(pramas))
      await this.$store.dispatch('approval/addFlowInfoAct', { ...pramas })
        .then(res => {
          this.$message.success('数据修改成功！')
        })
        .catch(err => {
          this.$message.error('出错了：' + err)
        })
    }
  }
}
</script>

<style lang="scss">
  body{
    background-color: #f5f5f7 !important;
  }
  .boxTit{
    width: 150px;
    .el-input__inner{
      font-size: 16px;
      border-color: #3345ff;
    }
  }
  .flowTable {
    &-title {
      position: fixed;
      z-index: 99999;
      top:0px;
      left: 0px;
      width: 100%;
      color:#fff;
      background: #38adff;
      .topBox{
        display: flex;
        text-align: center;
        width: 500px;
        margin: 0 auto;
        padding: 25px 0;
      }
      .label{
        flex: 1;
        cursor: pointer;
        span{
          display: inline-block;
          width: 16px;
          height:16px;
          line-height: 16px;
          font-size: 12px;
          border-radius: 100%;
          border: solid 1px #fff;
          margin-right: 4px;
        }
      }
    }
    &-content{
      position: relative;
      overflow: scroll;
      top:68px;
      .procedureTemplate{
        position: fixed;
        z-index: 99;
        top:68px;
        box-shadow: 0 3px 10px 0 rgba(0,0,0,.1);
        background: #fff;
        left: -280px;
        width: 280px;
        height: 100%;
        .title{
          margin: 17px 0;
          font-size: 14px;
          color:#666;
          padding: 0 15px;
          width: 100%;
          cursor: pointer;
          display: flex;
          justify-content: space-between;
          i{
            position: relative;
            display: inline-block;
            width: 14px;
            height: 14px;
            top:2px;
            margin-right: 4px;
            background: #3296fa;
            &:before{
              position: absolute;
              content: '';
              width: 14px;
              height: 1px;
              left: 0;
              top:7px;
              background: #f4f4f5;
            }
            &:after{
              position: absolute;
              content: '';
              width: 1px;
              height: 14px;
              left: 7px;
              top:0px;
              background: #f4f4f5;
            }
          }
        }
        .titShow{
          position: fixed;
          display: flex;
          align-items: center;
          padding: 7px 10px;
          width: 131px;
          top: 60px;
          left: 0;
          z-index: 100;
          background: #fff;
          box-shadow: 0 3px 10px 0 rgba(0,0,0,.1);
          border-radius: 0 18px 18px 0;
        }
        .items{
          font-size: 12px;
          line-height: 1.5;
          color:#666;
          cursor: pointer;
          margin: 8px 15px;
          padding: 6px 10px;
          border-radius: 2px;
          border: 1px solid #e3e4e4;
          margin-bottom: 8px;
          display: flex;
          align-items: center;
          img{
            width: 30px;
            height: 30px;
            margin-right: 6px;
          }
        }
      }
      .mask{
        background: rgba(0,0,0,0.2);
        position: fixed;
        left: 0;
        top:0;
        width: 100%;
        height: 100%;
        z-index: 100;
      }
      .setParamsBox{
        position: fixed;
        z-index: 999;
        top:68px;
        box-shadow: 0 -3px 10px 0 rgba(0,0,0,.1);
        background: #fff;
        right: -550px;
        width: 550px;
        height: 100%;
        .title{
          line-height: 50px;
          padding: 0px 30px;
          border-bottom: solid 1px #ccc;
        }
        .content{
          .label{
            position: relative;
            color: #1890ff;
            line-height: 40px;
            font-size: 14px;
            border-bottom: solid 1px #ccc;
            span{
              position: relative;
              bottom: -1px;
              display: inline-block;
              padding: 0 20px;
              border-bottom: solid 2px #1890ff;
            }
          }
          .cont{
            padding: 15px;
            .tit{
              margin: 15px 0;
            }
            .list{
              display: flex;
              line-height: 33px;
              margin: 10px 0;
            }
          }
        }
        .foot{
          position: absolute;
          width: 100%;
          left: 0;
          bottom:70px;
          padding:15px;
          border-top: solid 1px #ccc;
          text-align: right;

        }
      }
      .setShow{
        transition: 200ms;
        right:0;
      }
      .topShow{
        transition: 200ms;
        left:0;
      }
      .svgBox {
        transform: scale(1);
        display: inline-block;
        position: relative;
        width: 100%;
        padding: 50px 0 100px 0;
        align-items: flex-start;
        justify-content: center;
        flex-wrap: wrap;
        min-width: -webkit-min-content;
        min-width: -moz-min-content;
        min-width: min-content;
        background-color: #f7f8fc;
        transform-origin: 0 0 0;
        .node-wrap {
          display: inline-flex;
          width: 100%;
          flex-direction: column;
          justify-content: flex-start;
          align-items: center;
          flex-wrap: wrap;
          padding: 0 50px;
          position: relative;
          .icon{
            font-size: 14px;
            margin-right: 5px;
          }
        }
        .branch-wrap{
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;
          align-items: center;
          min-height: 270px;
          min-width: 100%;
          .branch-box-wrap{
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 270px;
            min-width: 100%;
            flex-shrink: 0;
          }
          .branch-box{
            display: flex;
            overflow: visible;
            min-height: 180px;
            height: auto;
            border-bottom: 2px solid #ccc;
            border-top: 2px solid #ccc;
            position: relative;
            margin-top: 15px;
            .col-box{
              display: inline-flex;
              flex-direction: column;
              align-items: center;
              position: relative;
              &:before{
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 0;
                margin: auto;
                width: 2px;
                height: 100%;
                background-color: #cacaca;
              }
              .condition-box{
                padding-top: 30px;
                padding-right: 50px;
                padding-left: 50px;
                -webkit-box-pack: center;
                justify-content: center;
                -webkit-box-align: center;
                align-items: center;
                flex-grow: 1;
                position: relative;
                .branch-itembox{
                  position: relative;
                  width: 220px;
                  min-height: 72px;
                  background: #fff;
                  border-radius: 4px;
                  padding: 14px 19px;
                  cursor: pointer;
                }
              }
              .condition-node-box{
                padding-top: 30px;
                padding-right: 50px;
                padding-left: 50px;
                justify-content: center;
                align-items: center;
                flex-grow: 1;
                position: relative;
                &:before{
                  content: "";
                  position: absolute;
                  top: 0;
                  left: 0;
                  right: 0;
                  bottom: 0;
                  margin: auto;
                  width: 2px;
                  height: 100%;
                  background-color: #cacaca;
                }
                .auto-judge{
                  position: relative;
                  width: 220px;
                  min-height: 72px;
                  background: #fff;
                  border-radius: 4px;
                  padding: 14px 19px;
                  cursor: pointer;
                  &:after{
                    pointer-events: none;
                    content: "";
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    z-index: 2;
                    border-radius: 4px;
                    border: 1px solid transparent;
                    transition: all .1s cubic-bezier(.645,.045,.355,1);
                    box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);
                  }
                  &.active:after,&:active:after,&:hover:after {
                    border: 1px solid #3296fa;
                    box-shadow: 0 0 6px 0 rgba(50,150,250,.3)
                  }
                  &:hover .title-wrapper .close{
                    display: block;
                  }
                  .title-wrapper{
                    position: relative;
                    font-size: 12px;
                    color: #15bc83;
                    text-align: left;
                    line-height: 16px;
                    .edit-tit{
                      display: inline-block;
                      max-width: 120px;
                      overflow: hidden;
                      white-space: nowrap;
                      text-overflow: ellipsis;
                    }
                    .prio-tit{
                      display: inline-block;
                      float: right;
                      margin-right: 10px;
                      color: rgba(25,31,37,.56);
                    }
                    .close{
                      display: none;
                      position: absolute;
                      font-style: normal;
                      right: -10px;
                      top: -10px;
                      width: 20px;
                      height: 20px;
                      font-size: 14px;
                      color: #ccc;
                      border-radius: 50%;
                      text-align: center;
                      line-height: 20px;
                    }
                  }
                  .content{
                    font-size: 14px;
                    color: #191f25;
                    text-align: left;
                    margin-top: 6px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 3;
                    -webkit-box-orient: vertical;
                  }
                }
                .add-node-btn{
                  position: relative;
                  user-select: none;
                  width: 240px;
                  padding: 20px 0 32px;
                  display: flex;
                  justify-content: center;
                  flex-shrink: 0;
                  flex-grow: 1;
                  .btn{
                    outline: none;
                    box-shadow: 0 2px 4px 0 rgba(0,0,0,.1);
                    width: 30px;
                    height: 30px;
                    text-align: center;
                    background: #3296fa;
                    border-radius: 50%;
                    position: relative;
                    border: none;
                    line-height: 26px;
                    cursor: pointer;
                    &:before{
                      content: '+';
                      font-size: 24px;
                      color:#fff;
                      line-height: 30px;
                    }
                    &:hover{
                      transition: 200ms;
                      transform: scale(1.3);
                      box-shadow: 4px 4px 8px 2px rgba(0,0,0,.1);
                    }
                  }
                }
              }
            }
            .add-branch{
              border: none;
              outline: none;
              user-select: none;
              justify-content: center;
              font-size: 12px;
              padding: 0 10px;
              height: 30px;
              line-height: 30px;
              border-radius: 15px;
              color: #3296fa;
              background: #fff;
              box-shadow: 0 2px 4px 0 rgba(0,0,0,.1);
              position: absolute;
              top: -16px;
              left: 50%;
              transform: translateX(-50%);
              transform-origin: center center;
              cursor: pointer;
              z-index: 1;
              display: inline-flex;
              align-items: center;
              transition: all .3s cubic-bezier(.645,.045,.355,1);
            }
          }
        }
        .add-node-btn-box{
          width: 240px;
          display: inline-flex;
          flex-shrink: 0;
          position: relative;
          &:before{
            content: " ";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            width: 2px;
            height: 100%;
            background-color: #cacaca;
          }
          .add-node-btn {
            user-select: none;
            width: 240px;
            padding: 20px 0 32px;
            display: flex;
            justify-content: center;
            flex-shrink: 0;
            flex-grow: 1;
            .btn{
              outline: none;
              box-shadow: 0 2px 4px 0 rgba(0,0,0,.1);
              width: 30px;
              height: 30px;
              text-align: center;
              background: #3296fa;
              border-radius: 50%;
              position: relative;
              border: none;
              line-height: 26px;
              cursor: pointer;
              &:before{
                content: '+';
                font-size: 24px;
                line-height: 30px;
                color:#fff;
              }
              &:hover{
                transition: 200ms;
                transform: scale(1.3);
                box-shadow: 4px 4px 8px 2px rgba(0,0,0,.1);
              }
            }
          }
        }
        .node-wrap-box {
          display: inline-flex;
          position: relative;
          flex-direction: column;
          cursor: pointer;
          width: 220px;
          min-height: 78px;
          background: #fff;
          border-radius: 5px;
          z-index: 9;
          &:before{
            content: "";
            position: absolute;
            top: -12px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 4px;
            border-style: solid;
            border-width: 8px 6px 4px;
            border-color: #cacaca transparent transparent;
            background: #f5f5f7;
          }
          &:after {
            pointer-events: none;
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 2;
            border-radius: 4px;
            border: 1px solid transparent;
            transition: all .1s cubic-bezier(.645,.045,.355,1);
            box-shadow: 0 2px 5px 0 rgba(0,0,0,.1)
          }

          &.active:after,&:active:after,&:hover:after {
            border: 1px solid #3296fa;
            box-shadow: 0 0 6px 0 rgba(50,150,250,.3)
          }
          &:hover .title .close{
            display: block;
          }
          &:hover .title .edit-tit{
            border-bottom: dashed 1px #fff;
          }
          .title{
            position: relative;
            padding-left: 16px;
            padding-right: 30px;
            width: 100%;
            height: 24px;
            line-height: 24px;
            font-size: 12px;
            color: #fff;
            text-align: left;
            background: #576a95;
            border-radius: 4px 4px 0 0;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            display: flex;
            .icon{

            }
            .edit-tit{
              height: 20px;
              .chName{
                border-radius: 3px;
                border: solid 1px #fff;
                width: 170px;
                line-height: 14px;
                padding: 2px 10px;
              }
            }
            .close{
              display: none;
              position: absolute;
              font-size: 14px;
              font-style: normal;
              right: 10px;
              top: 50%;
              transform: translateY(-50%);
              width: 20px;
              height: 20px;
              font-size: 14px;
              color: #fff;
              border-radius: 50%;
              text-align: center;
              line-height: 20px;
            }
          }
          .content{
            position: relative;
            font-size: 14px;
            padding: 16px;
            padding-right: 30px;
          }
        }
        .start-node:before{
          content: none;
        }
        .start-node{
          &:hover .title .close{
            display: none !important;
          }
          &:hover .title .edit-tit{
            border-bottom: none;
          }
        }
      }
      .top-left-cover-line, .top-right-cover-line{
        position: absolute;
        display: block;
        height: 3px;
        width: 50%;
        background-color: #f5f5f7;
        top: -2px;
      }
      .top-left-cover-line{
        left:-1px;
      }
      .bottom-left-cover-line{
        left:-1px;
      }
      .bottom-left-cover-line, .bottom-right-cover-line{
        position: absolute;
        height: 3px;
        width: 50%;
        background-color: #f5f5f7;
        bottom: -2px;
      }
      .top-right-cover-line,.bottom-right-cover-line{
        right:-1px;
      }
      .end-node {
        border-radius: 50%;
        font-size: 14px;
        color: rgba(25, 31, 37, .4);
        text-align: left;
        .end-node-circle {
          width: 10px;
          height: 10px;
          margin: auto;
          border-radius: 50%;
          background: #dbdcdc;
        }
        .end-node-text {
          margin-top: 5px;
          text-align: center;
        }
      }
      .zoom{
        display: flex;
        position: fixed;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        height: 40px;
        width: 125px;
        top:70px;
        right: 40px;
        margin-top: 30px;
        z-index: 10;
        .zoom-in, .zoom-out{
          width: 30px;
          height: 30px;
          background: #fff;
          color: #c1c1cd;
          cursor: pointer;
          background-size: 100%;
          background-repeat: no-repeat;
        }
        .zoom-out {
          background-image: url(https://gw.alicdn.com/tfs/TB1s0qhBHGYBuNjy0FoXXciBFXa-90-90.png);
        }
        .zoom-in {
          background-image: url(https://gw.alicdn.com/tfs/TB1UIgJBTtYBeNjy1XdXXXXyVXa-90-90.png);
        }
      }
      .addbox{
        position: absolute;
        left: 150px;
        top: 20px;
        display: block;
        width: 320px;
        height: 150px;
        box-shadow: 0 2px 8px rgba(0,0,0,.15);
        background: #fff;
        border-radius: 5px;
        z-index: 8;
        &:after{
          content: '';
          display: block;
          background: #fff;
          left: -4px;
          top: 12px;
          width: 8px;
          height: 8px;
          transform: rotate(45deg);
          position: absolute;
          display: block;
          border-color: transparent;
          border-style: solid;
        }
        .cls{
          position: relative;
          cursor: pointer;
          display: block;
          width: 100%;
          height: 40px;
          &:after{
            content: 'X';
            position: absolute;
            right: 15px;
            top:15px;
            color:#ccc;
          }
        }
        .contBox{
          position: relative;
          display: flex;
          padding: 0px 10px 10px 10px;
          width: 100%;
          text-align: center;
          .items{
            flex: 1;
            .icon{
              display: inline-block;
              width: 70px;
              height: 70px;
              line-height: 70px;
              margin-bottom: 5px;
              border-radius: 100%;
              border: solid 1px #ccc;
              font-size: 35px;
              cursor: pointer;
            }
            .iconshenpiren{
              color:#ff943e;
              &:hover{
                color:#fff;
                background: #ff943e;
              }
            }
            .iconchaosong{
              color:#3296fa;
              &:hover{
                color:#fff;
                background: #3296fa;
              }
            }
            .iconfenzhi{
              color:#15bc83;
              &:hover{
                color:#fff;
                background: #15bc83;
              }
            }
            .text{
              display: block;
              font-size: 14px;
              color: #666;
            }
          }
        }
      }
    }
  }
</style>
